<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>推广公司列表</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="btnBox">
                <el-button size="small" icon="el-icon-plus" @click="companyadd()"
                    style="margin-right: 16px;">添加推广公司</el-button>
                <div>
                    <span>公司名称：</span>
                    <el-input size="small" v-model="gsName" placeholder="请输入公司名称"></el-input>
                </div>
                <div>
                    <span style="width: 74px;">入驻日期：</span>
                    <el-date-picker v-model="selectData" type="daterange" align="right" unlink-panels size="small"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-search" @click="getList('search')">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                    <el-button size="small" icon="el-icon-upload2" @click="statusHandle('top', 'up')">启用</el-button>
                    <el-button size="small" icon="el-icon-download" @click="statusHandle('top', 'down')">禁用</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="68vh" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="companyId" label="ID" width="70"></el-table-column>
                <el-table-column prop="companyName" label="公司名称"></el-table-column>
                <el-table-column prop="companyCount" label="公司账号" width="100"></el-table-column>
                <el-table-column prop="companyPassword" label="公司密码" width="100"></el-table-column>
                <el-table-column prop="codeNum" label="推广码数量" width="100"></el-table-column>
                <el-table-column prop="userNum" label="已有推广员数" width="120"></el-table-column>
                <el-table-column prop="totalMoney" label="总佣金"></el-table-column>
                <el-table-column prop="createTime" label="入驻时间"></el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.companyStatus === 1" type="success">启用中</el-tag>
                        <el-tag v-else type="warning">禁用中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-upload2" v-if="scope.row.companyStatus == 0"
                            @click="statusHandle('table', 'up', scope.row.companyId)">启用</el-button>
                        <el-button size="small" icon="el-icon-download" v-if="scope.row.companyStatus == 1"
                            @click="statusHandle('table', 'down', scope.row.companyId)">禁用</el-button>
                        <el-button size="small" icon="el-icon-plus"
                            @click="handle('add', scope.row.companyId)">新增推广码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>

        </el-card>


        <!-- 弹窗 -->
        <el-dialog :title="diaFlag == 'jie' ? '结算' : '结算详情'" :visible.sync="addDia" width="30%"
            :before-close="closeAddDialog">
            <template v-if="diaFlag == 'jie'">
                <el-form :model="jieForm" :rules="rules" ref="form" label-width="120px">
                    <el-form-item label="待结算佣金" prop="daiJieNum">
                        <el-input v-model="jieForm.daiJieNum" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="本次结算佣金" prop="jieNum">
                        <el-input type="number" v-model="jieForm.jieNum" @input="inputHandle"
                            placeholder="请输入本次结算佣金"></el-input>
                    </el-form-item>
                    <el-form-item label="剩余佣金" prop="resNum">
                        <el-input v-model="jieForm.resNum" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input v-model="jieForm.note" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeAddDialog">取 消</el-button>
                    <el-button type="primary" @click="submitAddDialog">确 定</el-button>
                </span>
            </template>
            <template v-if="diaFlag == 'detail'">
                <!-- <div class="infoBox">
                    <div>
                        总佣金：<span>1111</span>元
                    </div>
                    <div>
                        待结算：<span>611</span>元
                    </div>
                </div> -->
                <el-table :data="jieDetailList" border style="width: 100%">
                    <el-table-column prop="product_name" label="结算金额"></el-table-column>
                    <el-table-column prop="product_name" label="结算时间"></el-table-column>
                    <el-table-column prop="product_name" label="备注"></el-table-column>
                </el-table>
            </template>
        </el-dialog>


        <!-- 新增推广码 -->
        <el-dialog title="新增推广码" :visible.sync="addCodeDia" width="30%" :before-close="closeCodeDialog">
            <el-form :model="codeForm" label-width="100px">
                <el-form-item label="推广码数量">
                    <el-input v-model="codeForm.codeNum" type="number" placeholder="请输入推广码数量"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeCodeDialog">取 消</el-button>
                <el-button type="primary" @click="submitCode">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增推推广公司 -->
        <el-dialog title="新增推推广公司" :visible.sync="addcompany" width="30%" :before-close="closeaddcompany">
            <el-form :model="companyForm" label-width="100px">
                <el-form-item label="新增公司名称">
                    <el-input v-model="companyForm.companyName" type="text" placeholder="请输入新增公司名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeaddcompany">取 消</el-button>
                <el-button type="primary" @click="submitaddCompany">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { getCompanyList, addCompanyList, updateCompanyUpDown, addCompanyCode } from '../../network/company'
export default {
    data() {
        return {
            tableData: [],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            gsName: '', // 公司名称
            selectData: [],//入驻时间

            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

            addDia: false, // 弹窗
            addcompany: false,//弹窗
            diaFlag: '',//  jie  结算弹窗   detail  结算详情 

            jieForm: {  // 结算详情
                companyId: '',
                daiJieNum: '', //待结算佣金
                resNum: 0, // 剩余佣金
                jieNum: '',  // 本次结算佣金
                note: '',
            },
            rules: {
                jieNum: [
                    { required: true, message: '请输入本次结算佣金', trigger: 'blur' },
                ],
            },
            jieDetailList: [],//结算佣金详细记录


            addCodeDia: false,
            codeForm: {
                companyId: '',
                codeNum: '',
            },
            companyForm: {
                companyName: '',
                companyId: 1
            },

            checkList: [],// 选择的数据
        };
    },
    methods: {

        statusHandle(position, flag, obj) {

            if (position == 'top' && this.checkList.length == 0) {
                this.$message.warning('请选择要操作的公司')
                return
            }
            if (position == 'top') {
                if (flag == 'up') {
                    // 启用多个
                    let Ids = ''
                    for (let i = 0; i < this.checkList.length; i++) {
                        Ids = Ids + this.checkList[i].companyId + ','
                    }
                    updateCompanyUpDown({
                        Ids: Ids,
                        status: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search');
                        }
                    })
                } else {
                    // 禁用多个
                    let Ids = ''
                    for (let i = 0; i < this.checkList.length; i++) {
                        Ids = Ids + this.checkList[i].companyId + ','
                    }
                    updateCompanyUpDown({
                        Ids: Ids,
                        status: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search');
                        }
                    })
                }
            } else {
                if (flag == 'up') {
                    // 启用一个
                    updateCompanyUpDown({
                        Ids: obj,
                        status: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search');
                        }
                    })
                } else {
                    // 禁用一个
                    updateCompanyUpDown({
                        Ids: obj,
                        status: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search');
                        }
                    })
                }
            }
        },

        handle(flag, obj) {
            this.diaFlag = flag

            if (flag == 'jie') {
                // 结算
                this.addDia = true
                this.jieForm.companyId = 1
                this.jieForm.daiJieNum = 200
            } else if (flag == 'add') {
                // 结算详情
                this.codeForm.companyId = obj
                this.addCodeDia = true
            } else if (flag == 'detail') {
                this.addDia = true
            }
        },

        //   提交结算
        submitAddDialog() {
            this.$refs.form.validate((valid) => {
                if (!valid) return

                console.log(this.jieForm);

            });


        },
        companyadd() {
            this.addcompany = true;
        }
        ,
        submitaddCompany() {
            addCompanyList({
                companyName: this.companyForm.companyName,
                companyId: this.companyForm.companyId
            }).then(res => {
                if (res.flag) {
                    this.addcompany = false;
                    this.getList('search');
                }
            })
        },


        // 提交添加推广码
        submitCode() {
            if (this.codeForm.codeNum == '') {
                this.$message.warning('请输入推广码数量')
                return
            }
            addCompanyCode({
                companyId: this.codeForm.companyId,
                codeNum: this.codeForm.codeNum
            }).then(res => {
                if (res.flag) {
                    this.addCodeDia = false;
                    this.getList('search')
                }
            })

            console.log(this.codeForm);

        },

        // 检测本次结算佣金
        inputHandle() {

            var form = this.jieForm

            if (form.jieNum > form.daiJieNum) {
                this.$message.warning('结算佣金大于待结算佣金，请仔细核对')
                form.jieNum = 0
            }
            form.resNum = form.daiJieNum - form.jieNum

            this.jieForm = form
        },

        getList(flag) {
            if (flag == 'search') {
                // 获取数据
                console.log(this.gsName);
                console.log(this.selectData);
                var str1 = '', str2 = '';
                if (this.selectData != null) {
                    str1 = this.selectData[0]
                    str2 = this.selectData[1]
                }

                getCompanyList({
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    companyName: this.gsName,
                    startTime: str1,
                    endTime: str2,
                    companyId: 1
                }).then(res => {
                    if (res.flag) {

                        this.tableData = res.data.list;
                        this.totalNum = res.data.total;
                    }
                })
            } else if (flag == 'res') {
                this.tableData = []
                this.gsName = ''
                this.selectData = []
                this.$message.success('已重置')
                this.getList('search')
            }
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.getList('search')
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList('search')
        },

        closeAddDialog() {
            this.addDia = false
            if (this.diaFlag == 'jie') {
                this.$refs.form.resetFields()
            }
        },


        closeCodeDialog() {
            this.addCodeDia = false
        },
        closeaddcompany() {
            this.addcompany = false;
        },


        selectChange(val) {
            this.checkList = val
        },





    },
    created() {
        getCompanyList({
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            companyId: 1
        }).then(res => {
            if (res.flag) {
                this.tableData = res.data.list;
                this.totalNum = res.data.total;
            }
        })
    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    width: 100px;
    display: inline-block;
    font-size: 14px;
}

.nameTip {
    margin-bottom: 16px;
}


.infoBox {
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.infoBox>div {
    margin-right: 24px;
}

.infoBox>div>span {
    margin-right: 6px;
    font-size: 22px;
    font-weight: bold;
}
</style>